<template>
  <div class="topbar-container">
    <div class="left">
      <img src="@/assets/Layout/TopBar/logo.png" alt="" />
    </div>
    <div class="right">
      <RouterLink
        v-for="item in items"
        :id="item.id"
        :key="item.link"
        :to="{ name: item.name }"
        active-class="selected"
        class="item"
      >
        <span>{{ item.title }}</span>
      </RouterLink>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          id: "home",
          name: "Home",
          title: "首页",
          exact: false, //激活状态是否要精确匹配
        },
        {
          id: "service",
          name: "Service",
          title: "云服务中心",
          exact: false,
        },
        {
          id: "market",
          name: "Market",
          title: "关于名扬云",
          exact: false,
        },
        {
          id: "login",
          name: "Login",
          title: "登录",
          exact: false,
        },
      ],
    };
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.topbar-container {
  margin: 0;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 64px;
  align-items: center;
  justify-content: space-between;
  padding: 0 360px;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
  .left {
    width: 148px;
    height: 32px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    display: flex;
    align-items: center;
    column-gap: 40px;
    font-size: 16px;
    color: #333;
    .item {
      box-sizing: border-box;
      height: 64px;
      line-height: 64px;
    }
    .selected {
      color: @primary;
    }
    #login {
      position: relative;
      width: 64px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: linear-gradient(90deg, @primary 0%, #30b7ff 100%);
      border-radius: 16px;
      color: #fff;
    }
    #home {
      width: 62px;
      text-align: center;
      &.selected {
        border-bottom: 3px solid @primary;
      }
    }
    #service,
    #market {
      width: 110px;
      text-align: center;
      &.selected {
        border-bottom: 3px solid @primary;
      }
    }
  }
}
</style>